import React from 'react';
import { LineBox, LineModal, LineSvg, lines } from './components';
import provinceMapOutBg from '@/assets/datang/province_map_out_bg.png';
import styles from './index.less';

export default ({ dataSource }) => {
  const [active, setActive] = React.useState(lines[0].name);
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <div className={styles.container} style={{ backgroundImage: `url(${provinceMapOutBg})` }}>
        <div className={styles.rt_box}>
          <LineBox
            value={active}
            onChange={setActive}
            data={dataSource}
            onArrow={() => setVisible(true)}
          />
        </div>
        <div className={styles.rt_line}>
          <LineSvg value={active} />
        </div>
      </div>
      {visible && (
        <LineModal
          value={active}
          onChange={setActive}
          data={dataSource}
          onClose={() => setVisible(false)}
        />
      )}
    </>
  );
};
